<!--表单跳转-->
<script setup>
import { ref, onMounted } from 'vue'
import useTableView from '@/hooks/use-table-view'
import usePopoverHandle from '@/hooks/use-popover-handle'
import PopFormTest from '@/views/playground/test-form/components/PopFormTest.vue'
import { pagePlaygroundMockApi, getPlaygroundByIdMockApi, delPlaygroundByIdMockApi } from '@/api/mock-js/playground-api'
import useDelPop from '@/hooks/use-del-popover'

defineOptions({
  name: 'TestView'
})

const queryInfo = ref({
  params: {
    status: '0',
  }
})

// table hooks
const {
  tableData,
  renderTable,
  loading,
  total,
  del,
  menuStore
} = useTableView(queryInfo)

// 删除 hooks
const {delData, visibleDelPop, tempRef, showDelPop} = useDelPop()

// 浮窗表单 hooks
const {
  visibleFormPop,
  btnPopRef,
  popFormRef,
  showFormPop
} = usePopoverHandle()
/* 路由跳转
*  @params {object} row 行数据,编辑时（editFlag==2）和查看时（editFlag==1）传入
* @params {number}editFlag 留白or0-新增 1-查看 2-编辑 3-审批
* */
const handleRouter = (row, editFlag) => {
  menuStore.handleFormRouter('/testView/formTest', '/playground', row, editFlag)
}

const downExcelModel = () => {
  console.log('请把此处改为下载模板的api')
}

onMounted(async () => {
  await renderTable?.(pagePlaygroundMockApi, 1)
})
</script>
<template>
  <TableView class="user" v-loading="loading"
             v-model="queryInfo.pageNum"
             v-model:pageSize="queryInfo.pageSize"
             :total="total"
             @reload-table="renderTable(pagePlaygroundMockApi)">
    <template #header>
      <ViewSearchForm v-model="queryInfo"
                      :tool-list="['keyword']"
                      @on-search="renderTable(pagePlaygroundMockApi)">
        <ElFormItem prop="status" label="状态" label-width="60px">
          <ElSelect v-model="queryInfo.status">
            <ElOption label="已通过" value="0"/>
            <ElOption label="已驳回" value="1"/>
          </ElSelect>
        </ElFormItem>
      </ViewSearchForm>
    </template>
    <template #headerRight>
      <ElButton v-permission="['sys:params:edit']" type="primary" @click="handleRouter()">表单新增
      </ElButton>
      <ImportExcel
          action="请把此处改为导入excel的api"
          :permit-key="['sys:params:edit']"
          download-name="测试下载模板"
          name="测试上传模板"
          @on-download="downExcelModel"
      />
    </template>
    <ElTable ref="tableRef" :data="tableData" style="width: 100%;" border stripe>
      <ElTableColumn type="index" label="ID"/>
      <ElTableColumn label="标题" width="190" #default="{row}">
        <ElButton type="primary" link @click="handleRouter(row,2)">
          {{ row.title }}(跳转只读表单)
        </ElButton>
      </ElTableColumn>
      <ElTableColumn label="副标题" width="200" #default="{row}">
        <ElButton type="primary" link @click="e=>showFormPop(e,row,getPlaygroundByIdMockApi)">
          {{ row.subTitle }}(只读浮窗)
        </ElButton>
      </ElTableColumn>
      <ElTableColumn prop="content" label="内容" min-width="200"/>
      <ElTableColumn label="创建时间" prop="createTime" width="200"/>
      <ElTableColumn prop="remarks" label="备注"/>
      <ElTableColumn label="操作" width="260" fixed="right" #default="{row}">
        <ElButton v-permission="['sys:params:del']" size="small"
                  @click="e=>showDelPop(e,row,`测试数据-${row.subTitle}`)">删除
        </ElButton>
        <ElButton v-permission="['sys:params:edit']" size="small" type="primary"
                  @click="handleRouter(row,1)">跳转form
        </ElButton>
      </ElTableColumn>
    </ElTable>
    <!--  删除popover start -->
    <DeletePopover v-if="visibleDelPop"
                   :temp-ref="tempRef"
                   v-model:del-info="delData"
                   v-model="visibleDelPop"
                   @on-submit="del(delData.id,delPlaygroundByIdMockApi,pagePlaygroundMockApi)"/>
    <template v-if="visibleFormPop">
      <PopFormTest ref="popFormRef" :temp-ref="btnPopRef" v-model="visibleFormPop"/>
    </template>
  </TableView>
</template>

